const player = {
  DOM: document.querySelector('.player'),
  state: 0, //0站立 1移动
  moveSpeed: 1.8,
  moveDir: 'right',
  isJump: false,
  jumpFlag: 1, // 1 上升 2 下降
  jumpHeight: 60,
  jumpSpeed: 5,
  currentBottom: 0,
  isBig: false,  // 是否是变大的
  width: 0,
  height: 0,
  x1: 0,
  x2: 0,
  y1: 0,
  y2: 0,
  bgIndex: 2,
  updateXY: function () {
    this.width = this.DOM.offsetWidth
    this.height = this.DOM.offsetHeight
    this.x1 = this.DOM.style.left.substr(0, this.DOM.style.left.length - 2) - 0;
    this.x2 = this.x1 + this.width
    this.y1 = this.DOM.style.bottom.substr(0, this.DOM.style.bottom.length - 2) - 0
    this.y2 = this.y1 + this.height
  }
}
var queryBox = document.querySelector('.queryBox')
var queryItems = document.querySelectorAll('.queryBox .item')
player.updateXY()
var storeBox = document.querySelector('.storeBox span')



function startGame () {
  document.addEventListener('keydown', function (e) {
    if (e.key == 'a') {
      player.moveDir = 'left'
      player.state = 1
    }

    if (e.key == 'd') {
      player.moveDir = 'right'
      player.state = 1

    }
    if (e.key == 'j' && player.isJump == false) {

      player.isJump = true
      player.jumpFlag = 1

    }
  })
  document.addEventListener('keyup', function (e) {
    if (e.key == 'a') {
      player.state = 0
    }

    if (e.key == 'd') {
      player.state = 0

    }

  })
}
startGame()
// 加分
function addStore () {
  var div = document.createElement('div')
  div.innerHTML = '+100'
  div.classList.add('store')
  player.DOM.appendChild(div)
  setTimeout(() => {
    player.DOM.removeChild(div)
  }, 800);
  storeBox.innerHTML = storeBox.innerHTML - 0 + 100
}
// 创建敌人
function createEnemy (node) {
  var dom = document.createElement('div')
  dom.classList.add('en1')
  var parentLeft = node.offsetLeft
  dom.style.left = parentLeft + 'px'
  node.appendChild(dom)
  console.log(node.offsetLeft);
  dom.classList.add('active')

  setTimeout(function () {
    var dir = 'right';
    var enemy = setInterval(() => {
      // 更改移动方向
      var worldX = dom.offsetLeft + queryBox.offsetLeft
      if (worldX + 24 >= 280) {
        dir = 'left'
      }

      dir == 'right' ? dom.style.left = dom.offsetLeft - 0 + 2 + 'px' : dom.style.left = dom.offsetLeft - 0 - 2 + 'px'
      if (dom.offsetLeft >= 70 && dom.offsetTop < 70) {
        dom.style.top = dom.offsetTop + 8 + 'px'
      }

      if (dom.offsetTop < 70) return

      if (player.x2 >= worldX + 5 && player.x1 <= worldX + 24 && player.y1 < 10) {
        console.log(player.jumpFlag);
        if (player.jumpFlag == 2) {
          console.log('踩死');
          addStore()
        } else {
          console.log('碰死');

        }
        clearInterval(enemy)
      }


    }, 40);
  }, 400)
}
// 创建金币
function createMoney (money, node) {

  node.setAttribute('data-money', money - 1)
  var dom = document.createElement('div')
  dom.classList.add('money')
  dom.style.left = node.offsetLeft + 'px'
  node.appendChild(dom)
  dom.classList.add('money-active')
  // 加分
  addStore()
  setTimeout(() => {
    node.removeChild(dom)
  }, 500);
}
// 碰撞检测
function checkCollisions () {
  // 获取障碍物坐标
  var queryLeft = queryBox.offsetLeft;

  [...queryItems].forEach(item => {
    var itemLeft = queryLeft + item.offsetLeft
    var itemRight = itemLeft + 24

    if (player.x2 > (itemLeft + 12) && player.x1 < (itemRight - 12)) {
      // 播放碰撞动画
      item.style.animation = 'coolAni 0.3s linear'
      setTimeout(() => {
        item.style.animation = ''
      }, 300);
      // 判断碰撞的是怪物盒子还是buff盒子
      if (item.className.indexOf('enemy') !== -1) {
        // 创建怪物
        var money = item.getAttribute('data-money')
        money > 0 ? createMoney(money, item) : createEnemy(item)
      } else {
        // 创建BUFF
      }
    }
  })
}

const update = setInterval(() => {
  //更新站立状态方向
  if (player.state == 0) {
    player.DOM.style.background = `url(images/stand_small_${player.moveDir}.png)`
  }

  if (player.state == 1) {
    // 切换背景图 完成移动动画
    if (player.isJump == false) {
      player.bgIndex == 8 && (player.bgIndex = 2)
      var index = player.bgIndex * 0.5 + ''

      if (index.length == 1) {
        player.DOM.style.background = `url(images/move_small_${player.moveDir}_${index}.png)`
      }
      player.bgIndex++
    }

    var move = player.moveDir == 'left' ? player.x1 - player.moveSpeed : player.x1 + player.moveSpeed
    player.DOM.style.left = move + 'px'
    player.updateXY()
  }
  // 跳跃状态
  if (player.isJump) {
    // 

    player.DOM.style.background = `url(images/jump_small_${player.moveDir}.png)`
    player.updateXY()
    // 判断是否着地
    if (player.y1 <= player.currentBottom && player.jumpFlag == 2) {
      player.isJump = false
      player.jumpFlag = 1
      player.DOM.style.bottom = player.currentBottom + 'px'
      return
    }
    // 是否到达最大高度
    if (player.y1 >= player.jumpHeight + player.currentBottom) {
      player.jumpFlag = 2
      checkCollisions()
    }

    // 更新跳跃
    player.DOM.style.bottom = (player.jumpFlag == 1 ? player.y1 + player.jumpSpeed : player.y1 - player.jumpSpeed) + 'px'

  }
}, 30);